import 'package:flutter/material.dart';
import 'package:cook_dinner/config/include.dart';

class SignatureBox extends StatelessWidget {
  const SignatureBox({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<int> _list = [5, 10, 15, 20, 25, 30, 35];
    return Container(
      width: double.infinity,
      height: 260.rpx,
      margin: EdgeInsets.only(
        left: 15.rpx,
        right: 15.rpx,
        top: 18.rpx,
        bottom: 36.5.rpx,
      ),
      padding: EdgeInsets.only(
        top: 27.rpx,
        right: 22.rpx,
        left: 16.5.rpx,
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.rpx),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 1.rpx), // 垂直偏移4px，水平偏移0
            blurRadius: 10.rpx, // 模糊半径20px
            spreadRadius: 3.rpx, // 扩展半径0，保持阴影大小不变
            color: const Color(0xFFC25757).withOpacity(0.15), // 颜色设置为透明度较低的黑色
          ),
        ],
      ),
      child: Column(
        children: [
          Row(
            children: [
              Text(
                '已连续签到3天',
                style: TextStyle(
                  fontSize: 20.rpx,
                  color: Colors.black,
                ),
              ),
              SizedBox(width: 30.rpx),
              Text(
                '连续签到7天即可获得大礼包',
                style: TextStyle(
                  fontSize: 16.rpx,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          SizedBox(height: 29.rpx),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: List.generate(
              _list.length,
              (index) {
                return SignDesk(
                  index: index,
                  points: _list[index],
                );
              },
            ),
          ),
          Center(
            child: InkWell(
              child: Container(
                width: 308.rpx,
                height: 45.5.rpx,
                margin: EdgeInsets.only(top: 35.rpx),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(23.rpx),
                  color: const Color(0xffFA8303),
                ),
                child: Text(
                  '立即签到',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.rpx,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class SignDesk extends StatefulWidget {
  const SignDesk({Key? key, this.points, this.index}) : super(key: key);

  final int? points;
  final int? index;

  @override
  State<SignDesk> createState() => _SignDeskState();
}

class _SignDeskState extends State<SignDesk> {
  bool _current = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        InkWell(
          onTap: () {
            setState(() {
              _current = true;
            });
          },
          child: Container(
            width: 36.6.rpx,
            height: 36.6.rpx,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(19.rpx),
              color:
                  _current ? const Color(0xffFA8303) : const Color(0xffF0F0F0),
            ),
            alignment: Alignment.center,
            margin: EdgeInsets.only(bottom: 10.rpx),
            child: _current
                ? Image.asset(
                    'assets/images/done.png',
                    width: 21.rpx,
                    height: 16.rpx,
                  )
                : widget.index == 6
                    ? Image.asset(
                        'assets/images/ritual.png',
                        width: 15.rpx,
                        height: 15.rpx,
                      )
                    : Text(
                        '+${widget.points}',
                        style: TextStyle(
                          fontSize: 16.rpx,
                          color: const Color(0xffA6A7A2),
                        ),
                      ),
          ),
        ),
        Text(
          '${widget.index! + 1}天',
          style: TextStyle(
            fontSize: 16.rpx,
            color: Colors.black,
          ),
        ),
      ],
    );
  }
}
